import React, { useEffect, useImperativeHandle, useState } from 'react';
import { Button, Form, Input, message, Modal, Select, Switch } from 'antd';
import { instance } from '../../../api/request';
import style from '@/css/Tom/Aleart.less';
import BadMap from './BaiMap';

const { Option } = Select;
const App = (props: any) => {
  const [isModalVisible, setIsModalVisible] = useState(false);
  // @ts-ignore
  const { children, title, childRef, shows } = props;
  const [data, set_data] = useState({});
  const [Grouping, setGrouping] = useState([]);
  let timer: any = null;
  const [addMes, setAddMes] = useState('');

  useImperativeHandle(childRef, () => ({
    showModal: (e: any) => {
      console.log(e);
      switch (e) {
        case '分组':
          show();
          break;
        case '新增':
          // renderMap();
          break;
        default:
          console.log('其他的');
      }
      let timer: any = null;

      function show() {
        if (timer !== null) clearTimeout(timer);
        timer = setTimeout(async function () {
          instance.get('/store/findGrouping').then(async (e) => {
            let arr: any = [];
            await e.data.forEach((e: any) => {
              e.key = e.id + 'lis';
              arr.push(e);
            });
            console.log(e.data);
            setGrouping(arr);
            //    console.log(e.data)
          });
        }, 500);
      }

      setIsModalVisible(true);
    },
  }));

  useEffect(() => {}, []);
  const handleOk = () => {
    console.log('点击了确认');
    setIsModalVisible(false);
  };

  const handleCancel = () => {
    console.log('点击了取消');
    setIsModalVisible(false);
  };

  function onchange(checked: any) {
    console.log(checked);
  }

  function addNew() {
    if (addMes.length > 0) {
      instance
        .post('/store/addGrouping', {
          grouping_name: addMes,
        })
        .then((e: any) => {
          console.log(e);
          if (e.code === 200) {
            instance.get('/store/findGrouping').then(async (e) => {
              let arr: any = [];
              await e.data.forEach((e: any) => {
                e.key = e.id + 'lis';
                arr.push(e);
              });
              setGrouping(arr);
              //    console.log(e.data)
            });
            message.success(e.mes);
          } else {
            message.error(e.mes);
          }
        });
    }

    console.log('新增', addMes);
  }

  const [search, setSearch] = useState('');
  return (
    <>
      <Modal
        title={title}
        visible={isModalVisible}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <div
          style={{
            width: '100%',
            height: '500px',
            overflowY: 'auto',
            overflowX: 'hidden',
          }}
        >
          {shows === '1' ? (
            <RegistrationForm />
          ) : (
            <div className={style.box}>
              <div className={style.top}>
                <div className={style.top_left}>
                  <button onClick={addNew}>新增</button>
                </div>
                <div className={style.top_right}>
                  <input
                    onChange={(e: any) => {
                      setSearch(e.target.value);
                    }}
                    onBlur={() => {
                      if (search.length <= 0) {
                        message.error('不能为空');
                      } else {
                        instance
                          .get(
                            '/store/findGroupingFuzzy?name=grouping_name&value=' +
                              search,
                          )
                          .then(async (e) => {
                            let arr: any = [];
                            await e.data.forEach((e: any) => {
                              e.key = e.id + 'lis';
                              arr.push(e);
                            });
                            setGrouping(arr);
                          });
                      }
                    }}
                    type="text"
                    placeholder="请输入名称"
                  />
                </div>
              </div>
              <div className={style.center}>
                <div className={style.center_top}>
                  <ul>
                    <li>分组名称</li>
                    <li>启用</li>
                    <li>创建时间</li>
                    <li>操作</li>
                  </ul>
                </div>
                {Grouping.map((e: any) => (
                  <div className={style.center_top}>
                    <ul>
                      <li>{e.grouping_name}</li>
                      <li>
                        <Switch
                          defaultChecked={e.status}
                          onChange={(checked) => {
                            console.log(checked, e.id);
                            let a;
                            if (checked) {
                              a = 1;
                            } else {
                              a = 0;
                            }
                            console.log(a);
                            instance
                              .put('/store/setGrouping', {
                                id: e.id,
                                status: a,
                              })
                              .then((e: any) => {
                                console.log(e);
                              });
                          }}
                        />
                      </li>
                      <li
                        style={{
                          overflow: 'hidden',
                          display: 'flex',
                          flexFlow: 'nowrap',
                        }}
                      >
                        {e.createdAt.split(' ')[0]}
                      </li>
                      <li>操作</li>
                    </ul>
                  </div>
                ))}
                <div className={style.center_top}>
                  <ul>
                    <li>
                      <input
                        style={{
                          width: '90%',
                          marginLeft: '5%',
                          border: '0',
                          outline: 'none',
                        }}
                        type="text"
                        onChange={(e: any) => {
                          setAddMes(e.target.value);
                        }}
                        placeholder="请输入分组名称"
                      />
                    </li>
                    <li>
                      <Switch defaultChecked={false} onChange={() => {}} />
                    </li>
                    <li>2021-9-2</li>
                    <li>操作</li>
                  </ul>
                </div>
              </div>
            </div>
          )}
        </div>
      </Modal>
    </>
  );
};

//第二个添加表单

const formItemLayout = {
  labelCol: {
    xs: { span: 20 },
    sm: { span: 6 },
  },
  wrapperCol: {
    span: 15,
    offset: 0,
  },
};
const tailFormItemLayout = {
  wrapperCol: {
    xs: {
      span: 14,
      offset: 30,
    },
    sm: {
      span: 14,
      offset: 10,
    },
  },
};

const RegistrationForm = (props: any) => {
  const [form] = Form.useForm();
  const [parent, setChildren] = useState('');
  const onFinish = (values: any) => {
    console.log('Received values of form: ', values);
  };

  return (
    <Form {...formItemLayout} form={form} name="register" onFinish={onFinish}>
      <Form.Item initialValue={parent} name="username" label="登录账号">
        <Input />
      </Form.Item>

      <Form.Item name="password" label="密码">
        <Input.Password />
      </Form.Item>
      <Form.Item name="mname" label="门店名称">
        <Input />
      </Form.Item>
      <Form.Item name="tname" label="门店店长">
        <Input />
      </Form.Item>
      <Form.Item name="phone" label="店长手机号">
        <Input />
      </Form.Item>
      <Form.Item name="back_url" label="门店背景">
        <div>上传文件</div>
      </Form.Item>

      <Form.Item name="logo_url" label="门店logo">
        <div>上传文件</div>
      </Form.Item>
      <Form.Item name="certification_inf" label="认证信息">
        <Input />
      </Form.Item>
      <Form.Item name="address" label="地址">
        <Input />
      </Form.Item>
      <Form.Item name="det_address" label="详细地址">
        <Input />
      </Form.Item>

      <Form.Item name="extract_address" label="自提点地址">
        <Input />
      </Form.Item>
      <Form.Item name="extract_coordinate" label="自提点坐标">
        <Input />
      </Form.Item>
      <Form.Item name="map" label="地图定位">
        <div
          id="container"
          style={{ width: '300px', height: '300px', background: 'red' }}
        >
          <BadMap setParent={setChildren} />
        </div>
      </Form.Item>
      <Form.Item name="delivery" label="是否开启配送">
        <div>是</div>
      </Form.Item>
      <Form.Item name="delivery_money" label="配送费">
        <Input />
      </Form.Item>
      <Form.Item name="withdraw_percentage" label="提现扣点（%）">
        <Input />
      </Form.Item>
      <Form.Item name="caption" label="简单说明">
        <Input />
      </Form.Item>
      <Form.Item name="type" label="是否营业">
        <div>是</div>
      </Form.Item>
      <Form.Item {...tailFormItemLayout}>
        <Button type="primary" htmlType="submit">
          提交
        </Button>
      </Form.Item>
    </Form>
  );
};

export default App;
